<template>
  <el-dialog
    v-model="dialogVisible"
    title="充值凭证上传"
    width="500px"
    :before-close="close"
    destroy-on-close
  >
    <el-form
      v-loading="loading"
      ref="baseFormRef"
      :model="baseFrom"
      label-position="left"
      label-width="80px"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="充值金额" prop="amount">
            <VabNumberForm v-model="baseFrom.amount" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="买方" prop="customer_id">
            <VabSelectForm
              :options="categoryList"
              v-model="baseFrom.customer_id"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="卖方" prop="org_id">
            <VabSelectForm
              :options="organizationList"
              v-model="baseFrom.org_id"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="币别" prop="currency">
            <VabSelectForm
              :options="currencyList"
              v-model="baseFrom.currency"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="打款方式" prop="pay_type">
            <VabSelectForm
              :options="settleTypeList"
              v-model="baseFrom.pay_type"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="充值凭证" prop="credit_url">
            <VabUploadFile
              ref="vabUploadFileRef"
              :accept="accept"
              title="上传"
              tip="支持word、Excel、PDF、JPG、JPEG、PNG上传(最多上传一份)"
              :style="{
                width: '100%',
                height: '30px',
                'font-size': '14px',
              }"
              @expose-path="
                (path: string) => {
                  baseFrom.credit_url = path
                }
              "
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="flex_center">
        <VabButton title="取消" @click="dialogVisible = false" />
        <VabButton
          type="primary"
          title="提交"
          @click="submitForm(baseFormRef)"
        />
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { FormInstance } from 'element-plus'
  import { ref } from 'vue'
  import { getCustomerCategoryList } from '~/src/api/dms/home/homeCustomer'
  import {
    getOrganizationList,
    rechargeCreate,
  } from '~/src/api/dms/home/organization'
  import { getBaseList } from '~/src/api/dms/public'
  import { BaseUserInfo } from '../utils/utils'

  /**
   * @var
   */
  const proxy: any = getCurrentInstance()?.proxy

  const dialogVisible = ref(false)
  const vabUploadFileRef = ref()
  const baseFrom = ref<any>({
    customer_id: '',
    amount: '',
    currency: '',
    pay_type: '',
    org_id: '',
    credit_url: '',
  })
  const accept = '.docx,.doc,.xls,.xlsx,.pdf,.jpg,.png,.jpeg'
  const categoryList = ref<any>([])
  const organizationList = ref<any>([])
  const currencyList = ref<any>([])
  const settleTypeList = ref<any>([])
  const baseFormRef = ref()
  const rules = {
    amount: [
      {
        required: true,
        message: '充值金额不能为空',
        trigger: 'blur',
      },
    ],
    customer_id: [
      {
        required: true,
        message: '买方不能为空',
        trigger: 'blur',
      },
    ],
    org_id: [
      {
        required: true,
        message: '卖方不能为空',
        trigger: 'blur',
      },
    ],
    currency: [
      {
        required: true,
        message: '币别不能为空',
        trigger: 'blur',
      },
    ],
    pay_type: [
      {
        required: true,
        message: '打款方式不能为空',
        trigger: 'blur',
      },
    ],
    credit_url: [
      {
        required: true,
        message: '充值凭证不能为空',
        trigger: 'blur',
      },
    ],
  }
  const userInfo = BaseUserInfo()
  const loading = ref(false)

  /**
   * @method
   */

  const emit = defineEmits(['refresh'])

  // 打开
  const open = async () => {
    dialogVisible.value = true
    loading.value = true
    const cateRes = await getCustomerCategoryList() //买方
    const orgRes = await getOrganizationList() //卖方

    const currencyRes = await getBaseList('currency') //币别
    const settleTypeRes = await getBaseList('settle_type') //付款方式

    organizationList.value = orgRes.data.map((item: any) => {
      return { value: item.uid, label: item.name }
    })
    categoryList.value = cateRes.data.map((item: any) => {
      return { value: item.uid, label: item.name }
    })
    currencyList.value = currencyRes.data.map((item: any) => {
      return { value: item.uid, label: item.name }
    })
    settleTypeList.value = settleTypeRes.data.map((item: any) => {
      return { value: item.uid, label: item.name }
    })

    baseFrom.value = {
      amount: '',
      customer_id: userInfo.uid,
      currency: '1',
    }

    loading.value = false
  }
  // 关闭
  const close = () => {
    dialogVisible.value = false
  }
  // 提交
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return

    await formEl.validate((valid, fields) => {
      if (!valid) return

      const { customer_id, amount, currency, pay_type, org_id, credit_url } =
        baseFrom.value

      let query = {
        customer_id,
        amount,
        currency,
        pay_type,
        org_id,
        credit_url,
      }

      rechargeCreate({ ...query }).then((res: any) => {
        proxy.$Message('充值凭证上传成功!', 'success')
        close()
        emit('refresh')
      })
    })
  }

  defineExpose({
    open,
    close,
  })
</script>
<style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>
